.app-container {
  width: 100%;
  padding: 0;
  margin: 0 auto;
  //内容
  .content {
    width: 94%;
    margin: 0 auto;
    .list {
      display: flex;
      align-items: center;
      margin: 1rem 0;
      .list_img {
        width: 18%;
        margin-right: 0.5rem;
        img {
          width: 4rem;
          height: 4rem;
          border-radius: 50%;
        }
      }
      .list_text {
        width: 82%;
        .names {
          display: flex;
          justify-content: space-between;
          :nth-child(1) {
            font-weight: bold;
          }
          :nth-child(2) {
            color: #999999;
            font-size: 0.5rem;
            margin-bottom: 1rem;
          }
        }
        .information {
          color: #999999;
          overflow: hidden;
          white-space: nowrap;
          //text-overflow: ellipsis;
        }
      }
    }
  }
  // 底部
  .bottom{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 2rem;
    position: fixed;
    left: 0;
    bottom: 2%;
    // 首页按钮
    :nth-child(1){
      .index{
        width: 2.2rem;
        height: 2rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .index_text {
        width: 100%;
        height: 100%;
        margin-top: 0.2rem;
        text-align: center;
        font-size: 0.5rem;
        color: #7D7FF7;
      }
    }
    // +
    :nth-child(2){
      width: 4rem;
      height: 4rem;
      margin-top: -1rem;
      .plus_outer {
        width: 4rem;
        height: 4rem;
        box-sizing: border-box;
        padding: 1px;
        border-radius: 50%;
        .plus_inner {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: #fff;
          position: relative;
          .plus {
            width: 90%;
            height: 90%;
            border-radius: 50%;
            background: linear-gradient(#7d7ff7, rgba(125, 127, 247, 0.4));
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-47%);
            .add {
              color: #ffffff;
              font-size: 3.5rem;
              position: absolute;
              top:50%;
              left: 50%;
              transform: translate(-50%,-50%);
            }
          }
        }
      }
      // 底部+外圈渐变
      .plus_outer {
        background-image: -webkit-linear-gradient(180deg, #7D7FF7 0%, rgba(123,125,246,0) 40%);
        background-image: -moz-linear-gradient(180deg, #7D7FF7 0%, rgba(123,125,246,0) 40%);
        background-image: linear-gradient(180deg, #7D7FF7 0%, rgba(123,125,246,0) 40%);
      }
    }
    // 消息
    :nth-child(3){
      .new{
        width: 1.8rem;
        height: 2rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .new_text {
        width: 100%;
        height: 100%;
        margin-top: 0.2rem;
        text-align: center;
        font-size: 0.5rem;
        color: #CCCCCC ;
      }

    }
  }
  //底部渐变线
  .bottom {
    border-top: 1px solid;
    border-image: -webkit-linear-gradient(90deg, rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0.6000000238418579), rgba(124.99024987220764, 126.99004456400871, 246.96750462055206, 0), rgba(125.00000014901161, 127.00000002980232, 247.00000047683716, 0), rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0), rgba(125.00000014901161, 127.00000002980232, 247.00000047683716, 0.12123732268810272), rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0.6000000238418579)) 1 1; /* 控制边框颜色渐变 */
    border-image: -moz-linear-gradient(90deg, rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0.6000000238418579), rgba(124.99024987220764, 126.99004456400871, 246.96750462055206, 0), rgba(125.00000014901161, 127.00000002980232, 247.00000047683716, 0), rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0), rgba(125.00000014901161, 127.00000002980232, 247.00000047683716, 0.12123732268810272), rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0.6000000238418579)) 1 1;
    border-image: linear-gradient(90deg, rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0.6000000238418579), rgba(124.99024987220764, 126.99004456400871, 246.96750462055206, 0), rgba(125.00000014901161, 127.00000002980232, 247.00000047683716, 0), rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0), rgba(125.00000014901161, 127.00000002980232, 247.00000047683716, 0.12123732268810272), rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0.6000000238418579)) 1 1;
  }
}
